很久没有更新博客了，而且前段时间也在忙着找工作，到现在才新入职两天T.T，今天开始重新更新个人博客了。

今年四月四的时候，国内不仅暂停了大部分娱乐活动，而且各大门户网站、视频网站，都对首页或者所有页面做出了内容和样式的大调整。在诸多修改中，最具视觉冲击力的当属大幅的网页黑白效果了。那么，如何不修改网页的大多数属性、重新打包图片等，简单地实现页面的黑白效果呢？

最直接的想法应该就是修改CSS样式表了。通过简单的查询可以了解到，CSS3中有filter这个属性。

简单的用法：

上面的代码通过 img 选择器将所有图片改成了黑白色

如果想要将整个页面改成黑白色，可以选择使用 html 选择器。

具体可以到菜鸟教程里查看filter这个属性的各种滤镜，功能可以说是非常强大。

CSS3 filter(滤镜) 属性

但是问题就在于这是一个CSS3属性。兼容问题目前始终是 CSS3 绕不开的问题，我们通过can i use查阅，可以看到该属性对于IE等老旧浏览器并不友好。

目前查询到的能兼容其它浏览器的较全版本如下所示：

前面的几段很普通，是平常的兼容性写法。

filter:url("data:image/svg... 这一行有些意思，它主要针对的应该是Firefox浏览器，因为 Firefox 虽说不支持css filter，但是支持svg effects for html。算是曲线救国了～

svg 图片进行解码与颜色填充达到修改颜色的目的。

而filter:progid:DXImageTransform.Microsoft.BasicImage()此行代码为IE自己提供的滤镜实现，性能不太友好。

可以来看看腾讯视频、哔哩哔哩等对于黑白效果的实现。

哔哩哔哩：仅一行代码，图片素材则是单独替换的灰度图，并非通过样式修改，应该是有性能上的考量：

腾讯视频使用代码如下，在IE浏览器下同样表现良好：

总的来说，上面的方式可以解决大部分的问题，flash、视频等内容没办法一一覆盖，像B站就只是更改了首页的色调，其他的页面并没有做特殊处理。

所以具体情况还是要具体分析。对于大型的样式管理比较复杂的网站，要是因为这样一个小调整导致整个网站访问大幅减慢，身为做出微小工作的你，可能就要背锅了2333。

最后对于IE10、11，可能还得用js。解决方案主要参考ajaxblender的《Convert Images to Grayscale》。

来做个小实验吧。

在 App.vue 中的 style 标签中插入上述代码。

原来的样子：

插入后，在chrome和Firefox中的样子：

简单记录一下～